<template>
  <el-drawer
    custom-class="learn-drawer"
    title="模型"
    :visible.sync="drawer"
    direction="btt"
    size="100%"
    :modal="false"
  >
  <div class="execution">
    <el-container>
      <div class="header">
<!--        <p class="header__title">{{ name }}</p>-->
<!--        <el-button-->
<!--          class="header__btn"-->
<!--          type="primary"-->
<!--          @click="breaks">关闭返回列表-->
<!--        </el-button>-->
      </div>
    </el-container>

    <el-scrollbar class="main">
      <iframe
        :src="src"
        class="iframe"/>
    </el-scrollbar>
  </div>
  </el-drawer>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        src: '',
        drawer: false
      }
    },
    // computed: {
    //   src() {
    //     return `${this.src}${this.id}`
    //   }
    // },
    created() {
      // this.id = this.$route.params.id
      // this.src = this.$route.query.src
      // console.log(this.src)
    },
    methods: {
      initEditor(src) {
        this.drawer = true
        this.src = src
      },
      breaks() {
        this.drawer = false
        // this.$router.$avueRouter.closeTag()
        // this.$router.push({ path: '/coordination/model-management' })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .execution {
    height: 99%;

    .header {
      position: relative;
      display: flex;
      align-items: center;

      &__title {
        font-size: 22px;
      }

      &__btn {
        position: absolute;
        right: 10px;
      }
    }

    .main {
      margin: 0 auto;
      width: 99%;
      /*height: calc(100% - 100px);*/
      height: 100%;
      background-color: #fff;
      padding: 20px;
      border-radius: 3px;
      box-sizing: border-box;
    }
  }
  .iframe {
    width: 100%;
    height: 100%;
    min-height: 700px;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

</style>
